<template>
  <div class="ipam">
    <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
    <van-empty v-if="ipExist" description="我的地址在哪里">
      <van-button round class="bottom-button" to="/editAddress">
        新增地址
      </van-button>
    </van-empty>
    <van-address-list
      v-else
      v-model="chosenAddressId"
      :list="addressList"
      @add="onAdd"
      @edit="onEdit"
      @select="chosenIp"
    />
  </div>
</template>
 <script>
export default {
  data() {
    return {
      addressList: [],
      chosenAddressId: '',
      ipExist: false,
      name:sessionStorage.uName,
      id:sessionStorage.uId
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push('/weipersonal');
    },
    //跳转到添加地址
    onAdd() {
      this.$router.push("/editAddress");
    },
    //点击编辑跳转修改/删除地址页面
    onEdit(item, index) {
      let id = item.id;
      // console.log(id);
      this.$router.push({
        path:`/updelAddress/${id}`
      })
      // console.log(item, index);
    },
    //发送带参数的get请求获取地址
    getIp(aName,Uid) {
      this.axios.get(`/kc/address?aName=${aName}&Uid=${Uid}`)
      .then((res) => {
        this.addressList=[];
        let userIp = res.data.result;
        if(typeof(userIp)!=="undefined" && userIp.length!==0){
          for (let i=0;i<userIp.length;i++){
            this.addressList.push({
              id:userIp[i].aId,
              name:userIp[i].aDsser,
              tel:userIp[i].aPhone,
              address:userIp[i].aDs
            })
          }
          this.ipExist = false;
          //默认选择列表第一个地址
          this.chosenAddressId = this.addressList[0].id;
          // console.log(this.chosenAddressId);
        }else{
          this.ipExist = true;
        }
        // console.log(this.addressList[0].id);
      });
    },
    //保存用户选择地址的id
    chosenIp(e){
      if(e){
        this.chosenAddressId = e.id;
        console.log(e.id);
      }
    }
  },
  mounted() {
    //这里传入的参数根据登录的用户来决定！！
    this.getIp(this.name,this.id);
    this.chosenIp();
  },
};
</script>
 <style lang="scss">
.ipam {
  text-align: left;
  height: 100vh;
  .van-icon {
    color: #000;
  }
  .van-address-item .van-radio__icon--checked .van-icon {
    background-color: #ffcb00;
    border-color: #ffcb00;
  }
  .bottom-button {
    width: 340px;
    height: 40px;
  }
  .van-button--default {
    background-color: #ffcb00;
  }
  .van-button--danger {
    color: #000;
    background-color: #ffcb00;
    border: 1px solid #ffcb00;
  }
}
</style>